<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>请假单管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="${ctx }/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="${ctx }/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">

<!--  搜索 查询   -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
  <legend>查询条件</legend>
</fieldset>
<form class="layui-form" id="searchFrm">
<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">请假单标题</label>
      <div class="layui-input-inline">
        <input type="text" name="title" id="title" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">请假单内容</label>
      <div class="layui-input-inline">
        <input type="text" name="content" id="content" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">开始时间</label>
      <div class="layui-input-inline">
        <input type="text" name="startDate" id="startDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">结束时间</label>
      <div class="layui-input-inline">
        <input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

	<div class="layui-form-item" style="text-align: center;">
	 	<a href="javascript:void(0)" class="search_btn layui-btn">查询</a>
    	<button type="reset" class="layui-btn layui-btn-warm" >重置</button>
  	</div>
</form>

<!-- 数据表格 -->
	<table id="leaveBillList" lay-filter="leaveBillList"></table>
	<!--表格工具条  批量删除-->
	<script type="text/html" id="tableToolBar">
		<a class="layui-btn layui-btn" lay-event="add">添加</a>
	</script>
	
<!--表格数据 工具条-->
<script type="text/html" id="leaveBillListBar">
	{{#  if(d.state ==0 ){ }}
   	<a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="startProcess">提交申请</a>
  {{#  } else if(d.state ==1) { }}
     <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="view">审批查询</a>
  {{#  }else if(d.state ==2) { }}
	 <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="view">审批查询</a>
  {{#  }else if(d.state ==3) { }}
	  <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="view">审批查询</a>
  {{#  } }}
</script>

<script type="text/javascript" src="${ctx }/resources/layui/layui.js"></script>
<script type="text/javascript">
var tableIns;
function reloadTable(id) {
	tableIns.reload({
	    page: {
	        curr: 1 //重新从第 1 页开始
	    },
	    where: {
	    	title: $("#title").val() ,  //搜索的关键字
	    	content: $("#content").val() , 
	        startDate: $("#startDate").val() ,
	        endDate: $("#endDate").val()
	    }
	});
}

    layui.use(['form','layer','laydate','table','laytpl'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;

      //绑定时间选择器
        laydate.render({
        	elem:'#startDate',
        	type:'date'
        });
        laydate.render({
        	elem:'#endDate',
        	type:'date'
        })
        
        //请假单列表
        tableIns = table.render({
            elem: '#leaveBillList',
            url : '${ctx}/leaveBill/queryAllLeaveBill.action',
            cellMinWidth : 95,
            toolbar: '#tableToolBar',
            page : true,
            height : "full-200",
            limit : 10,
            limits : [10,15,20,25],
            defaultToolbar: ['filter'],
            id : "leaveBillListTable",
            cols : [[
                {type: "checkbox", fixed:"left", width:50},
                {field: 'id', title: '请假单ID', width:80, align:"center"},
                {field: 'title', title: '请假单标题', width:100, align:"center"},
                {field: 'content', title: '请假单内容', align:"center",width:100},
                {field: 'username', title: '请假人', align:"center",width:100},
                {field: 'days', title: '请假天数', align:'center',width:120},
                {field: 'leavetime', title: '请假时间',  align:'center',width:150},
                {field: 'state', title: '状态',  align:'center',templet:function(data){
                	var state=data.state;
                	if(state==0){
                		return "<font color=red>未提交</font>";
                	}else if(state==1){
                		return "<font color=green>审批中</font>";
                	}else if(state==2){
                		return "<font color=blue>审批完成</font>";
                	}else if(state==3){
                		return "<font color=gray>已放弃</font>";
                	}else{
                		return "<font color=yellow>未知状态</font>";
                	}
                }},
                {title: '操作', width:320, templet:'#leaveBillListBar',fixed:"right",align:"center"}
            ]]
        });
        
        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click",function(){
        	table.reload("leaveBillListTable",{
        	    page: {
        	        curr: 1 //重新从第 1 页开始
        	    },
        	    where: {
        	    	title: $("#title").val() ,  //搜索的关键字
        	    	content: $("#content").val() ,  
        	        startDate: $("#startDate").val() ,
        	        endDate: $("#endDate").val()
        	    }
        	});       
        });
        
        //监听头工具栏事件
        table.on('toolbar(leaveBillList)', function(obj){
            switch(obj.event){
            	case 'add':
            		toAddLeaveBill();
            		break;
                
            };
        });

      //准备添加，打开添加页面
      function toAddLeaveBill() {
		var index= layui.layer.open({
			title:'添加请假单',
			type: 2, 
			area: ['800px','600px'],
			content: '${ctx}/leaveBill/toAddLeaveBill.action' , //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
			success : function(layero, index){
	                  var body = layui.layer.getChildFrame('body', index);
	                  setTimeout(function(){
	                      layui.layer.tips('点击此处返回请假单列表', '.layui-layer-setwin .layui-layer-close', {
	                          tips: 3
	                      });
	                  },500)
	              }
		})
		//默认最大化窗口
	          //layui.layer.full(index);
	          //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
		$(window).on("resize",function(){
	              layui.layer.full(index);
	          })
	}


        //列表操作
        table.on('tool(leaveBillList)', function(obj){
            var layEvent = obj.event,
                data = obj.data;
            if(layEvent === 'update'){
				toUpdate(data.id);  //根据请假单ID查
			}else if(layEvent === 'del'){ //删除
            	layer.confirm('确定删除此请假单？',{icon:3, title:'提示信息'},function(index){
                    $.post("${ctx}/leaveBill/deleteLeaveBill.action?id="+data.id,function(data){
                    	layer.msg(data.msg);
                    	tableIns.reload();
                        layer.close(index);
                    }),
                    tableIns.reload();
                    layer.close(index);
                })
            }else if(layEvent==='startProcess'){
	           	 layer.confirm('确定是提交【'+data.title+'】请假单吗？',{icon:3, title:'提示信息'},function(index){
	        		 $.post("${ctx}/workFlow/startLeaveBillProcess.action",{id:data.id},function(data){
	             		layer.msg(data.msg);
	             		//刷新table
	                     tableIns.reload();
	                     //关闭提示框
	                     layer.close(index);
	             	},"json")
	             });
	        }else if(layEvent==="view"){//查看审批进度
            	viewApprovalProgress(data.id) 
            }   
        });
        
      //打开修改层
        function toUpdate(id) {
        	var index= layui.layer.open({
    			title:'修改请假单',
    			type: 2, 
    			area: ['800px','600px'],
    			content: '${ctx}/leaveBill/toUpdateLeaveBill.action?id='+id , //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
    			success : function(layero, index){
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function(){
                        layui.layer.tips('点击此处返回请假单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                }
    		})
    		//默认最大化窗口
            //layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
    		$(window).on("resize",function(){
                layui.layer.full(index);
            })
    	}

      //查看审批进度
        function viewApprovalProgress(id){
            var index = layui.layer.open({
                title : "查看审批进度",
                type : 2,
                area:["800px","600px"],
                content : "${ctx }/workFlow/toViewApprovalProgress.action?id="+id,
                success : function(layero, index){
                    setTimeout(function(){
                        layui.layer.tips('点击此处返回请假单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                }
            })
            //layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(index);
            })
        }
    });
    
  

</script>
</body>
</html>